<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class = "box"></div>
<script>
    /*
    * 按 w s a d 让盒子在页面中移动
    *   w 上
    *   s 下
    *   a 左
    *   d 右
    *
    *   键盘事件：和鼠标事件类似
    *   鼠标点击事件：onclick
    *
    *   键盘按下事件：onkeydown
    *
    *   一般是window感知键盘事件
    *
    * */



    //盒子模块
    //什么样的代码最容易理解？
    //实现一个box 可以通过调用 box.moveRight 这几个方法使得页面元素跟着移动
    let box = {
        el:document.querySelector(".box"), //设置一个属性：属性值就是获取到的那个需要被操作的盒子元素
        x:0, //一开始便在这个对象内部初始化（设置好） 盒子的x坐标
        y:0, //以及盒子的y坐标
        moveRight:function (){
            //第一步：计算盒子坐标的偏移量 通过box.moveRight使得盒子向右移动 是box调用了moveRight box访问了自己内部的x属性
            this.x += 20
            //第二步：修改元素的位置
            this.el.style.transform = `translate(${this.x}px,${this.y}px)`//将box下面的盒子元素的style属性里的transform属性里的x y变成新的x y
        },
        moveLeft:function (){
            this.x -= 20
            this.el.style.transform = `translate(${this.x}px,${this.y}px)`
        },
        moveTop:function (){
            this.y -= 20
            this.el.style.transform = `translate(${this.x}px,${this.y}px)`
        },
        moveBottom:function (){
            this.y += 20
            this.el.style.transform = `translate(${this.x}px,${this.y}px)`
        },
    }

    //键盘模块
    window.onkeydown = function (e){
        switch (e.key){
            case "w":
                box.moveTop()
                break
            case "s":
                box.moveBottom()
                break
            case "a":
                box.moveLeft()
                break
            case "d":
                box.moveRight()
                break
        }
    }


</script>
</body>
</html>